<template>
  <div class="cart">
    <header>
      <i @click="$router.push('/home')" class="iconfont">&#xe624;</i>
      <h5>购物车</h5>
      <span @click="isNavBar" v-text="isNavStatus ?'完成':'编辑'"></span>
    </header>
    <section  v-if="list.length">
      <div class="cart-title">
        <van-checkbox :value="isCheckedAll" checked-color="#b0352f" @click="CheckedAllFn"></van-checkbox>
        <span>商品</span>
      </div>
      <div class="cart-content">
        <ul>
          <li v-for="(item,index) in list" :key="index">
            <div class="check">
              <van-checkbox v-model="item.checked" checked-color="#b0352f" @click="checkItem(index)"></van-checkbox>
            </div>
            <h2>
              <img :src="item.goods_imgUrl" alt="">
            </h2>
            <div class="goods">
              <div class="goods-title">
                <span>{{item.goods_name}}</span>
                <!-- 删除图标(并且传递用户点击删除对应的购物车id) -->
                <i class="iconfont" @click="delGoodsFn(item.id)">&#xe6a0;</i>
              </div>
              <div class="goods-price">￥{{item.goods_price}}</div>
              <van-stepper v-model="item.goods_num" integer @change="changeNum($event,item)"/>
            </div>
          </li>
        </ul>
      </div>
    </section>
    <section class="no-cart" v-else>
        <i class="iconfont bigIcon">&#xe62a;</i>
        <p>您的购物车是空的</p>
        <div class="btn">
          <button @click="$router.push('/list')">分类</button>
          <button  @click="$router.push('/home')">首页</button>
        </div>
        <div class="search" @click="$router.push('/search')">
          <span>搜索您喜欢的...</span>
          <i class="iconfont">&#xe752;</i>
        </div>
    </section>
    <footer v-if="list.length">
      <div class="radio">
        <van-checkbox :value="isCheckedAll" checked-color="#b0352f" @click="CheckedAllFn"></van-checkbox>
      </div>
      <div class="total" v-show="!isNavStatus">
        <div>共有 
          <span class="total-active">{{total.num}}</span>
          件 商品</div>
        <div>
          <span>总计:</span>
          <span class="total-active">￥{{total.price.toFixed(2)}}</span>
        </div>
      </div>
      <div :class="total.num? 'order-true':'order-false'" v-show="!isNavStatus" @click="goOrder">结算</div>
      <div class="order-true" v-show="isNavStatus" @click="delGoodsFn">删除</div>
    </footer>
    <Tabbar></Tabbar>
  </div>
</template>

<script>
//引入axios的二次封装
import http from '@/common/api/request.js'
import { mapMutations, mapState,mapActions ,mapGetters} from 'vuex'
import Tabbar from '@/components/common/Tabbar.vue'
import {Toast} from 'vant'
export default {
    name:"Cart",
    components:{
      Tabbar,
    },
    data(){
      return{
        //选中数量  
        value:1,
        //右上角编辑/完成的状态值切换
        isNavStatus:false,
      }
    },
    created(){
      this.getData()
      
    },
    computed:{
      ...mapState({
        list:state=>state.cart.list,
        orderList:state=>state.order.orderList
      }),
      ...mapGetters(['isCheckedAll','total','goodsChecked'])   
    },
    methods:{
      ...mapMutations(['cartList','checkItem','initOrder']),
      ...mapActions(['CheckedAllFn','delGoodsFn']),
            //请求对应用户的数据
      async getData(){
        let res = await http.$axios({
          url:'/api/selectCart',
          method:'POST',
          // 需要查询当前用户的购物车，所以要用token判断
          headers:{
            token:true
          }
        })
        res.data.forEach(v => {
          //购物车中的商品选中状态默认为true
          v['checked'] = true

        });

        //运行vuex中的方法（把购物车的数据传递给vuex进行存储方便后续购买的调用）
        this.cartList(res.data)
      },
      //点击编辑或完成按钮
      isNavBar(){
        this.isNavStatus = !this.isNavStatus
      },
      //修改数量(vant组件步进器自带两个参数value（数字）,detail（描述）)
      changeNum(value,item){
        //当前商品对应购物车表里的id 以及修改后的数量传递给客户端
        //value 就是修改后的数量
        // item.id时购物车商品的id
        http.$axios({
          url:'/api/updateNum',
          method: 'POST',
          data:{
            num:value,
            id:item.id
          }
        })
      },
      //跳转至结算页面
      goOrder(){
        if(!this.total.num) return Toast('您未选中商品')
        //首先发送请求（生成订单号）
        http.$axios({
          url:'/api/addOrder',
          method: 'POST',
          headers:{
            token:true
          },
          data:{
            //选中的商品 以数组传递
            goodsChecked:this.goodsChecked,
            total:this.total
          }
        }).then(res=>{
          if(!res.success) return
          //把后端生成的订单号存储至vuex
          this.initOrder(res.data)
          console.log(this.orderList)
          //进入提交订单页面
          this.$router.push({
            name:'Order',
          })
        })
        
      }
      
     
      
    }

}
</script>

<style lang="less" scoped>
@rootsize:37.5rem;
header{
  display: flex;
    justify-content: space-between;
    align-items: center;
    position: fixed;
    width: 100%;
    height: (44 / @rootsize);
    background-color: #b0352f;
    color: #fff;
    z-index:999;
    i{
      padding: (10 / @rootsize) (10 / @rootsize) ;
      font-size: (22 / @rootsize);
    }
    h5{
      font-size: (18 / @rootsize);
      font-weight: 500;
    }
    span{
      padding: (10 / @rootsize) (15 / @rootsize) ;
      font-size: (16 / @rootsize);
    }
}
section{
  padding-bottom: (110 / @rootsize);
  .cart-title{
    display: flex;
    padding: (70 / @rootsize) (10 / @rootsize) 0;
    span{
      padding:0 (15 / @rootsize);
      font-size: (20 / @rootsize);
      font-weight: 500;
    }
  }
  .cart-content{
    ul{
      display: flex;
      flex-direction: column;
      margin: (10 / @rootsize) (3 / @rootsize);
      li{
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: (6  / @rootsize) (10 / @rootsize);
        margin: (6 / @rootsize) 0;
        background-color: #fff;
        border-radius: 20px;
        h2{
          img{
          width: (74 / @rootsize);
          height: (74 / @rootsize);
          }
        }
        .goods{
          font-size: (12 / @rootsize);
          .goods-title{
            display: flex;
            justify-content: space-between;
            width: 100%;
            span{
              width: ( 180 / @rootsize);
            }
            i{
              padding: (5 / @rootsize) 0 0 (20 / @rootsize);
              font-size: (20 / @rootsize);
            }
          }
          .goods-price{
            padding: (5 / @rootsize) 0;
            color: #b0352f;
          }
          ::v-deep .van-stepper{
            text-align: right;
          }
        }
      }
    }
  }
}
section::after{
  content: '';
  background-color: #f5f5f5;
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: -1;

}
footer{
  position: fixed;
  bottom: (70 / @rootsize);
  left: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: (48 / @rootsize);
  border: 1px solid #ccc;
  border-radius: 20px;
  background-color: #fff;
  .radio{
    padding: 0 (15 / @rootsize);
    
  }
  .total{
    flex: 1;
    font-size: (12 / @rootsize);
    .total-active{
      color: #b0352f;
    }
  }
  .order-true{
    padding:0 (20 / @rootsize);
    width: (120  / @rootsize);
    height: (48 / @rootsize);
    line-height: (48 / @rootsize);
    text-align: center;
    font-size: (16 / @rootsize);
    color: #fff;
    background-color: #b0352f;
    border-radius: 20px;
  }
  .order-false{
    padding:0 (20 / @rootsize);
    width: (120  / @rootsize);
    height: (48 / @rootsize);
    line-height: (48 / @rootsize);
    text-align: center;
    font-size: (16 / @rootsize);
    color: #fff;
    background-color: grey;
    border-radius: 20px;
  }
}
.no-cart{
  display: flex;
  flex-direction: column ;
  align-items: center;
  justify-content: center;
  height: 90vh;
   
  .bigIcon{
    font-size: (150 / @rootsize);
    font-weight: 300;
    color: #ccc;
  }
  p{
    padding: (10 / @rootsize);
    color: #666;
    font-size: (18 / @rootsize);
  }
  .btn{
    button{
      padding: (8 / @rootsize) (20 / @rootsize);
      font-size: (14 / @rootsize);
      border: none;
      border-radius: 5px;
      color: #666;
      font-weight: 400;

    }
    button:last-child{
      background-color: #b0352f;
      color: #fff;
    }
  }
  .search{
    position: relative;
    margin: (20 / @rootsize);
    width: (160  / @rootsize);
    color: #666;
    font-size: (18 / @rootsize);
    background-color: #fff; 
    i{
      position: absolute;
      right: 0;
      top: 0;
      font-size: (25 / @rootsize);
      background-color: #f5f5f5;
    }
  }
}

</style>